<template>
    <div class="top_header">
        <!-- <div class="sys_logo"><img class="sys_logo_img" src="~@/assets/logo.png"></div> -->
        <div class="sys_name">地学故事GIS时空信息系统</div>
        <!-- <div class="btn_leftDrawer_ctl" @click="leftDrawerToggle()"><img class="btn_ctl_img" src="~@/assets/item.png"/></div> -->
        <div class="top_nav_menu">
            <template>
                <mapgis-ui-menu :selectedKeys='["mail"]' mode="horizontal"  style="background-color:#f9ac2c;color:white;">
                    <mapgis-ui-menu-item @click="$router.push('/')">
                        <mapgis-ui-icon type="mail" />
                        首页
                    </mapgis-ui-menu-item>
                    <mapgis-ui-menu-item @click="$router.push('/people')">
                        <mapgis-ui-icon type="mail" />
                        奋斗的人
                    </mapgis-ui-menu-item>
                    <mapgis-ui-sub-menu>
                      <span slot="title" class="submenu-title-wrapper">
                        奋斗的故事
                      </span>
                        <mapgis-ui-menu-item-group title="老一辈">
                            <mapgis-ui-menu-item @click="$router.push('/gs60')">60年代的校友</mapgis-ui-menu-item>
                            <mapgis-ui-menu-item @click="$router.push('/gs70')">70年代的校友</mapgis-ui-menu-item>
                            <mapgis-ui-menu-item @click="$router.push('/gs80')">80年代的校友</mapgis-ui-menu-item>
                        </mapgis-ui-menu-item-group>
                        <mapgis-ui-menu-item-group title="中坚力量">
                            <mapgis-ui-menu-item @click="$router.push('/gs90')">90年代的校友</mapgis-ui-menu-item>
                            <mapgis-ui-menu-item @click="$router.push('/gs2000')">2000前后</mapgis-ui-menu-item>
                        </mapgis-ui-menu-item-group>
                    </mapgis-ui-sub-menu>
                    <mapgis-ui-sub-menu>
                      <span slot="title" class="submenu-title-wrapper">
                        既往开来
                      </span>
                        <mapgis-ui-menu-item-group title="承前启后">
                            <mapgis-ui-menu-item @click="$router.push('/future1')">星天海地探能源</mapgis-ui-menu-item>
                            <mapgis-ui-menu-item @click="$router.push('/future2')">探气测土卫环境</mapgis-ui-menu-item>
                        </mapgis-ui-menu-item-group>
                        <mapgis-ui-menu-item-group title="继往开来">
                            <mapgis-ui-menu-item @click="$router.push('/future3')">一丝一毫做技术</mapgis-ui-menu-item>
                            <mapgis-ui-menu-item @click="$router.push('/future4')">奋斗青春最美丽</mapgis-ui-menu-item>
                        </mapgis-ui-menu-item-group>
                    </mapgis-ui-sub-menu>
                    <mapgis-ui-menu-item @click="$router.push('/')">
                        <mapgis-ui-icon type="mail" />
                        系统管理
                    </mapgis-ui-menu-item>
                </mapgis-ui-menu>
            </template>
        </div>
        
        <div style="height:90%;width:100%;">
            <mapgis-web-map
                crs="EPSG:3857"
                :center="[128.2,40]"
                :zoom="9"                
            >
            <!-- :center="[116.39,40.2]" -->
            <!-- :maxBounds="[[-180,-90],[180,90]]" -->
                <mapgis-rastertile-layer
                    layerId="jl1"
                    url="https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=73ad26c4aa6957eef051ecc5a15308b4&tk=3eaf089e32d2ecfd0eabc53543b8610e"
                />
                <!-- https://api.jl1mall.com/getMap/{z}/{x}/{y}?mk=73ad26c4aa6957eef051ecc5a15308b4&tk=3eaf089e32d2ecfd0eabc53543b8610e -->
                <!-- url="http://t0.tianditu.com/DataServer?T=vec_w&L={z}&Y={y}&X={x}&tk=9c157e9585486c02edf817d2ecbc7752" -->

                <mapgis-fullscreen position="bottom-left" />

                <div v-if="hawkeyeOpenOrNot">
                    <mapgis-hawkeye />
                </div>
                
                <mapgis-custom-scale
                    :outStyle='{"position":"absolute","zIndex":900,"left":"10px","bottom":"10px","maxHeight":"300px","width":"220px"}'
                    />
            </mapgis-web-map>
        </div>
        <!-- <div class="user_info" @click="$router.push('/')"><img class="btn_ctl_img" src="~@/assets/images/profile2.png"/></div> -->
        <!--左侧抽屉导航栏-->
        <mapgis-ui-drawer
                :closable="true"
                title="导航菜单"
                :visible="isDrawerVisible"
                placement="left"
                @close="handleClose"
                :wrapStyle="{marginTop:'60px'}"
                :mask="false"
        >
            <template>
                <mapgis-ui-menu :selectedKeys='["mail"]' mode="inline">
                    <mapgis-ui-menu-item @click="$router.push('/')">
                        <mapgis-ui-icon type="mail" />
                        首页
                    </mapgis-ui-menu-item>
                    <mapgis-ui-menu-item @click="$router.push('/people')">
                        <mapgis-ui-icon type="mail" />
                        奋斗的人
                    </mapgis-ui-menu-item>
                    <mapgis-ui-sub-menu>
                      <span slot="title" class="submenu-title-wrapper">
                        奋斗的故事
                      </span>
                        <mapgis-ui-menu-item-group title="老一辈">
                            <mapgis-ui-menu-item @click="$router.push('/gs60')">60年代的校友</mapgis-ui-menu-item>
                            <mapgis-ui-menu-item @click="$router.push('/gs70')">70年代的校友</mapgis-ui-menu-item>
                            <mapgis-ui-menu-item @click="$router.push('/gs80')">80年代的校友</mapgis-ui-menu-item>
                        </mapgis-ui-menu-item-group>
                        <mapgis-ui-menu-item-group title="中坚力量">
                            <mapgis-ui-menu-item @click="$router.push('/gs90')">90年代的校友</mapgis-ui-menu-item>
                            <mapgis-ui-menu-item @click="$router.push('/gs2000')">2000前后</mapgis-ui-menu-item>
                        </mapgis-ui-menu-item-group>
                    </mapgis-ui-sub-menu>
                    <mapgis-ui-sub-menu>
                      <span slot="title" class="submenu-title-wrapper">
                        既往开来
                      </span>
                        <mapgis-ui-menu-item-group title="承前启后">
                            <mapgis-ui-menu-item @click="$router.push('/future1')">星天海地探能源</mapgis-ui-menu-item>
                            <mapgis-ui-menu-item @click="$router.push('/future2')">探气测土卫环境</mapgis-ui-menu-item>
                        </mapgis-ui-menu-item-group>
                        <mapgis-ui-menu-item-group title="继往开来">
                            <mapgis-ui-menu-item @click="$router.push('/future3')">一丝一毫做技术</mapgis-ui-menu-item>
                            <mapgis-ui-menu-item @click="$router.push('/future4')">奋斗青春最美丽</mapgis-ui-menu-item>
                        </mapgis-ui-menu-item-group>
                    </mapgis-ui-sub-menu>
                    <mapgis-ui-menu-item @click="$router.push('/')">
                        <mapgis-ui-icon type="mail" />
                        系统管理
                    </mapgis-ui-menu-item>
                </mapgis-ui-menu>
            </template>
        </mapgis-ui-drawer>
    </div>
</template>

<script>
//    import mapboxgl from '@mapgis/mapbox-gl'
//
//    import Mapbox from '@mapgis/mapbox-gl'
//    import { MapboxMap, MapboxIgsDocLayer } from '@mapgis/webclient-vue-mapboxgl'
//    import MapgisDocument from "../../node_modules/@mapgis/webclient-vue-mapboxgl/src/components/UI/document/Document";
//    import MapgisUiInputGroup from "../../node_modules/@mapgis/webclient-vue-ui/src/components/input/Group";


// import Mapgis2d from "@mapgis/webclient-vue-mapboxgl";
// import MapgisUi from "@mapgis/webclient-vue-ui";

    export default {
        components: {
            //MapgisUiInputGroup,
            //MapgisDocument,
            //MapboxMap, MapboxIgsDocLayer
        },
        data () {
            return {
                isDrawerVisible: false, //左侧导航栏抽屉默认不显示
                hawkeyeOpenOrNot: false
            }
        },
        methods: {
            handleClose(done) {
                this.isDrawerVisible = false;
            },
            leftDrawerToggle(){
                this.isDrawerVisible = !this.isDrawerVisible;
            },
        }
    }
</script>

<style>
    .top_header {
        /*background-color: #FFFFFF;*/
        background-color: #f9ac2c;
        width: 100%;
        height: 60px;
        border-bottom: 3px solid orange;
        display:flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
    /*.center_context {
        background-color:powderblue;
        width: 100%;
        heighvht: calc( 100vh - 60px );
    }*/

    .sys_logo {
        /*background-color: yellow;*/
        width: 80px;
        height: 60px;
        margin-left: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
    }
    .sys_logo_img {
        width:50px;
        height:50px;
    }
    .sys_name {
        /*background-color: chocolate;*/
        width:300px;
        height: 55px;
        color:white;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        font-size: 22px;
    }
    .btn_leftDrawer_ctl {
        /*background-color: aliceblue;*/
        width: 60px;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
    }
    .btn_ctl_img {
        width:30px;
        height:30px;
    }
    .top_nav_menu {
        /*background-color: deepskyblue;*/
        width: calc(100% - 80px - 60px - 300px - 140px - 40px);
        height: 55px;
        display: flex;
        flex-direction: row;
        align-items: center;
    }
    .mapgis-ui-menu-horizontal {
        border-bottom: unset;
    }
    .user_info {
        /*background-color: chartreuse;*/
        width: 150px;
        height: 55px;
        float:right !important;
        margin-right: 20px;
        display: flex;
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        cursor: pointer;
    }
</style>